<template>
  <div id="carouselExampleControls1" class="carousel slide" data-ride="carousel" ref="carouselExampleControls1"
    data-interval="false">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <ul class="topic-list">
          <li class="topic-item col-6 col-sm-6 col-md-6 col-lg-6 col-xl-3" v-for="item in topicData.data.slice(0,4)"
            :key="item._id">
            <a href="" class="topic-item-container">
              <img src="../assets/default.jpg" alt="" class="topic-item-iamge" lazyload="true"
                :data-original="item.image">
              <div class="topic-info">
                <div class="topic-title">
                  <p class="fs-md">{{item.title}}</p>
                </div>
                <div class="topic-about">
                  <div class="topic-about-left">
                    <i class="iconfont icon-user"></i>
                    <span>{{item.username}}</span>
                  </div>
                  <div class="topic-about-right">
                    <i class="iconfont icon-clock"></i>
                    <span>{{item.time}}</span>
                  </div>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="carousel-item">
        <ul class="topic-list">
          <li class="topic-item col-6 col-sm-6 col-md-6 col-lg-6 col-xl-3" v-for="item in topicData.data.slice(4,8)"
            :key="item._id">
            <a href="" class="topic-item-container">
              <img src="../assets/default.jpg" alt="" class="topic-item-iamge" lazyload="true"
                :data-original="item.image">
              <div class="topic-info">
                <div class="topic-title">
                  <p class="fs-md">{{item.title}}</p>
                </div>
                <div class="topic-about">
                  <div class="topic-about-left">
                    <i class="iconfont icon-user"></i>
                    <span>{{item.username}}</span>
                  </div>
                  <div class="topic-about-right">
                    <i class="iconfont icon-clock"></i>
                    <span>{{item.time}}</span>
                  </div>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="carousel-item">
        <ul class="topic-list">
          <li class="topic-item col-6 col-sm-6 col-md-6 col-lg-6 col-xl-3" v-for="item in topicData.data.slice(8,11)"
            :key="item._id">
            <a href="" class="topic-item-container">
              <img src="../assets/default.jpg" alt="" class="topic-item-iamge" lazyload="true"
                :data-original="item.image">
              <div class="topic-info">
                <div class="topic-title">
                  <p class="fs-md">{{item.title}}</p>
                </div>
                <div class="topic-about">
                  <div class="topic-about-left">
                    <i class="iconfont icon-user"></i>
                    <span>{{item.username}}</span>
                  </div>
                  <div class="topic-about-right">
                    <i class="iconfont icon-clock"></i>
                    <span>{{item.time}}</span>
                  </div>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <a class="carousel-control carousel-control-prev control-hidden" ref="carouselControl1"
      href="#carouselExampleControls1" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control carousel-control-next control-hidden" ref="carouselControl2"
      href="#carouselExampleControls1" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</template>

<script>
import { onMounted, getCurrentInstance } from 'vue'
export default {
  props: ['topicData'],
  setup () {
    onMounted(() => {
      lazyload()
      carouselControl()
    })

    // 图片懒加载
    function lazyload () {
      const scrollY = document.documentElement.scrollTop
      const offsetHeight = document.documentElement.offsetHeight
      const imgs = document.querySelectorAll('img[data-original][lazyload]')
      imgs.forEach(item => {
        if (item.dataset.original === '') {
          return
        }
        const rect = item.getBoundingClientRect()
        if (rect.bottom >= 0 && rect.top < scrollY + offsetHeight) {
          const img = new Image()
          img.src = item.dataset.original
          // console.log(img.src)
          img.onload = function() {
            item.src = img.src
          }
          item.removeAttribute('data-original')
          item.removeAttribute('lazyload')
        }
      })
    }
    document.addEventListener('scroll', lazyload)

    // 轮播图效果实现
    function carouselControl () {
      // 获取轮播图元素
      const instance = getCurrentInstance()
      const container = instance.refs?.carouselExampleControls1
      // console.log(container)

      // 控制左右箭头划入画出的显示
      container.addEventListener('mouseenter', onMouseEnter)
      container.addEventListener('mouseleave', onMouseLeave)
      function onMouseEnter (e) {
        const controls = e.target.querySelectorAll('.carousel-control')
        controls.forEach(control => {
          control.classList.remove('control-hidden')
        })
      }
      function onMouseLeave (e) {
        const controls = e.target.querySelectorAll('.carousel-control')
        controls.forEach(control => {
          control.classList.add('control-hidden')
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.carousel {
  .carousel-inner {
    .carousel-item {
      .topic-list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        margin: 0 -4px;
        .topic-item {
          padding: 0 4px;
          .topic-item-container {
            width: 100%;
            position: relative;
            .topic-item-iamge {
              width: 100%;
            }
            .topic-info {
              width: 100%;
              color: #fff;
              .topic-title {
                padding: 0 0 0 5px;
                display: table-cell;
                vertical-align: bottom;
                p {
                  width: 100%;
                  text-align: center;
                  position: absolute;
                  bottom: -80px;
                  @media (max-width: 576px) {
                    bottom: -60px;
                  }
                }
              }
              .topic-about {
                @media (max-width: 768px) {
                  display: none;
                  font-size: 12px;
                }
                padding: 5px 20px;
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
                position: absolute;
                bottom: -110px;
                .iconfont {
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }
    }
  }
  .carousel-control-prev {
    background-color: gray;
    top: 50% !important;
    height: 80px !important;
    line-height: 90px;
    transform: translateY(-50%);
    width: 4%;
    &.control-hidden {
      display: none;
    }
    &:hover {
      display: block;
    }
  }
  .carousel-control-next {
    background-color: gray;
    top: 50% !important;
    height: 80px !important;
    line-height: 90px;
    transform: translateY(-50%);
    width: 4%;
    &.control-hidden {
      display: none;
    }
    &:hover {
      display: block;
    }
  }
}
</style>
